<template>
  <div>
    <div class="operations">
    
    </div>
    <div class="card mb-3 mx-3">
      <div class="p-3">
        <div class="text-muted mb-3">系统权限列表
          <router-link to="/permission">(样式一)</router-link>
        </div>
        <router-link to="/permission/new" class="float-right"><span class="img-btn">┼</span> 新增权限</router-link>
      </div>
      <div class="row no-gutters text-muted mx-3" style="padding: .5rem .625rem">
        <span class="mr-auto">权限名</span>
        <span class="column">编码</span>
        <span class="column">优先级</span>
        <span class="column">操作</span>
      </div>
      <tree :treenodes="items" :expanded="expanded"></tree>
    </div>
  </div>
</template>

<script>
  import Menu from '@/api/system/menu'
  import {getStore, setStore} from '@/ui/common/helper/store'
  import {toggleNode} from '@/ui/misc'
  import Tree from "../../ui/components/tree/tree";

  var expanded = getStore('menu_expandeds');
  expanded = expanded ? JSON.parse(expanded) : {}

  export default {
    components: {Tree},
    name: "tree-list",
    data: () => ({
      loading: false,
      items: [],
      expanded: {},
    }),
    beforeRouteEnter(to, from, next) {
      Menu.list().then(response => {
        next(vm => {
          vm.items = response.data.obj
          vm.$nextTick(() => {
          })
        })
      })
    },
  }
</script>

<style scoped>

</style>